<template>
    <div class="container box-wrapper" >
      <div class="banner" >
        <template>
          <el-carousel  :height="bannerHeight+'px'" style="min-width: 960px">
            <el-carousel-item  style="background: #2e22f7;" >
              <div class="slider-item" :style="{height:bannerHeight+'px',width:'100%',backgroundImage:'url(../../../static/f99530a437ad11f66c7ff759e358f8b1.jpg)'}"></div>
            </el-carousel-item>
            <el-carousel-item  style="background: #2e22f7;min-width: 960px">
              <div class="slider-item" :style="{height:bannerHeight+'px',width:'100%',backgroundImage:'url(../../../static/fc23b6d01a211daec118a8d107671136.jpg)'}"></div>
            </el-carousel-item>
          </el-carousel>
        </template>
      </div>
      <div class="section-item" ref="item" style="background: #2ab27b">

      </div>
      <div class="section-item">

      </div>
      <div class="section-item">

      </div>
      <div class="section-item">

      </div>
    </div>
</template>
<script>

    export default {
        name: "index",
        data(){
          return{
            bannerHeight:0,
            bannerWidth:0
          }
        },
        mounted() {
          this.$nextTick(()=>{
            window.addEventListener('scroll', (e)=>{
              if(this.$refs['item'].offsetTop-50<e.target.scrollTop&&e.target.scrollTop<this.$refs['item'].offsetTop+50){
                console.log(11)
              }
            },true)
          })

          this.bannerWidth = document.documentElement.clientWidth
          this._setBannerHeight()
          window.addEventListener('resize', ()=> {
            let width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
            this.bannerWidth = width
            this._setBannerHeight()
          }, false);
        },
        methods:{
          _setBannerHeight(){
            if(this.bannerWidth<=960){
              return
            }
            this.bannerHeight = 720/1960*this.bannerWidth
          }
        }

    }
</script>

<style scoped lang="stylus">
  .container
    overflow hidden
    .section-item
      min-width 960px
      max-width 1280px
      height 580px
      background #8B929E
      margin 0 auto
    .slider-item
      min-width 960px
      background-repeat no-repeat
      background-position center
      background-size cover
      background-attachment fixed

</style>
